<template>
  <!--登录表单的容器-->
  <div class="login_container">
    <!--登录区域-->
    <img src="../assets/img/bG.jpg" class="bG">
    <div class="login_box">
      <div class="avatar_box">
        <!--头像-->
        <img src="../assets/img/login.jpg">
      </div>
      <!--表单-->
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="65px" class="login_Form">
        <el-form-item  label="用户名" prop="name">
          <el-input v-model="loginForm.name" prefix-icon="el-icon-user" placeholder="请输入用户名" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="verifyCode">
          <div class="verifyCode_box">
            <el-input v-model="loginForm.verifyCode" placeholder="请输入验证码" prefix-icon="el-icon-mobile" class="verifyCode"></el-input>
            <img src="../assets/img/msFvb6.gif" class="verify_img">
          </div>
        </el-form-item>
        <el-form-item class="login_btn">
          <el-button type="primary" @click="submitForm('loginForm')">立即创建</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
       name: "Login",
       data() {
        return {
          loginForm: {
            name: '',
            password: '',
            verifyCode: ''
          },
          loginRules: {
            name: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 16, message: '长度在 3 到 16个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
            ],
            verifyCode: [
              { required: true, message: '请输入验证码', trigger: 'blur' },
            ],
          }
        };
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$router.push("/main");
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }

}
</script>

<style lang="less" scoped>
  .login_container{
    height: 100%;
    .bG{
      position: fixed;
      //right:0;
      //bottom:0;
      min-width:100%;
      min-height:100%;
      /*width: auto;
      height:auto;
      z-index:-100;*/
      background-size: cover;
    }
  }
  .login_box {
    width: 450px;
    height: 380px;
    background-color: #FFFFFF;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
      width: 130px;
      height: 130px;
      border: 1px solid #EEEEEE;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: -65px auto;
      background-color: #EEEEEE;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .login_Form {
      bottom: 10px;
      position: absolute;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;

      .login_btn {
        display: flex;
        justify-content: flex-end;
      }
      .verifyCode_box{
        display: flex;
        .verifyCode{
          width: 70%;
          justify-content: left;
        }
        .verify_img{
          width: 30%;
          justify-content: flex-end;
        }
      }
    }
  }
</style>
